<!--
 描述: 滚动弧形线
 作者: Jack Chen
 日期: 2020-04-20
-->

<template>
    <div class="hbh-container">
      <commonTitle :title="'近30日充值/消费趋势'" />
      <div
        class="chartsdom"
        style="width: 100%;height: 300px;"
        id="chart_arc"
      ></div>
    </div>
  </template>
  
  <script>
  export default {
    name: "wdtwo",
    data() {
      return {
        option: null,
        number: 0, // 播放所在下标
        timer: null,
        xData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        data: [
          [24, 76, 36, 67, 86, 79, 78, 13, 28, 2, 56, 88],
          [54, 86, 46, 77, 96, 89, 88, 23, 38, 3, 66, 98],
          [64, 96, 56, 87, 106, 99, 98, 33, 48, 4, 108, 28],
        ],
      };
    },
    mounted() {
      this.getEchart();
    },
    methods: {
      getEchart() {
        let myChart = echarts.init(document.getElementById("chart_arc"));
        this.option = {
          tooltip: {
            trigger: "axis",
            showContent: true,
            axisPointer: {
              type: "shadow",
              shadowStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "#5d83ff",
                  },
                  {
                    offset: 0,
                    color: "rgba(255, 255, 255, 0)",
                  },
                ]),
              },
            },
            formatter: (parms) => {
              return `<div> <span>${parms[0].axisValue}月<span><br/><span>充值金额${parms[1].data}元<br/><span><span>消费金额${parms[2].data}元<span></div>`;
            },
          },
          legend: {
            show: true,
            right: "5%",
            icon: "rect",
            data: [
              {
                name: "充值金额",
                itemStyle: {
                  color: "#63D89A",
                },
              },
              {
                name: "消费金额",
                itemStyle: {
                  color: "#FEE186",
                },
              },
            ],
            textStyle: {
              color: "#d9dadb",
            },
          },
          grid: {
            top: 30,
            left: 20,
            right: 20,
            bottom: 20,
            containLabel: true, //轴上的数值
          },
          xAxis: {
            type: "category",
            data: this.xData,
            // boundaryGap: false,
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value} 月",
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff",
              },
            },
          },
          yAxis: {
            type: "value",
            name:"单位：元",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#ffffff",
              },
            },
          },
          series: [
            {
              name: "充值金额",
              type: "line",
              data: this.data[0],
              symbolSize: 10,
              symbol: "none",
              lineStyle: {
                color: "#63D89A",
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#ffffff",
                  fontSize: 20,
                },
                itemStyle: {
                  color: "#ffffff",
                  borderColor: "#fff",
                  borderWidth: 2,
                  opacity: 1,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#63D89A",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 0, 0, 0)",
                    },
                  ]),
                },
              },
              smooth: true,
            },
            {
              name: "消费金额",
              type: "line",
              data: this.data[1],
              symbolSize: 10,
              symbol: "none",
              lineStyle: {
                color: "#FEE186",
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 20,
                },
                itemStyle: {
                  color: "#63D89A",
                  borderColor: "#fff",
                  borderWidth: 2,
                  opacity: 1,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#FEE186",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 0, 0, 0)",
                    },
                  ]),
                },
              },
              smooth: true,
            },
            {
              name: "",
              type: "line",
              data: this.data[2],
              symbolSize: 10,
              symbol: "none",
              lineStyle: {
                color: "#5E7DC8",
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 20,
                },
                itemStyle: {
                  color: "#5d83ff",
                  borderColor: "#fff",
                  borderWidth: 2,
                  opacity: 1,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#5E7DC8",
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 0, 0, 0)",
                    },
                  ]),
                },
              },
              smooth: true,
            },
          ],
        };
        myChart.setOption(this.option, true);
  
        window.addEventListener("resize", () => {
          myChart.resize();
        });
  
        // this.timer = setInterval(() => {
        //   myChart.dispatchAction({
        //     type: 'showTip',
        //     seriesIndex: 0,
        //     dataIndex: this.number
        //   });
  
        //   this.number++;
  
        //   if (this.number > this.data.length) {
        //     this.number = 0;
        //   }
        // }, 1000);
      },
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .hbh-container {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .banner {
      padding-top: 10px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  </style>
  